<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件参数校验与非props特性</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- msg="hello world"  通过属性的形式，父组件向子组件传递参数 -->
        <!-- 组件参数校验：父组件向子组件传递的内容，那子组件有权对这个内容做一些约束，这些约束就叫参数的校验 -->
        <child msg="hello world"></child>
        <!-- <child :count="12"></child> -->
        <!-- <child :msg="123"></child>  msg是Number类型
        <child msg="123"></child>   msg是字符串 -->
    </div>
    <script>

        Vue.component('child', {
            //  1 组件参数校验:子组件要求父组件传递过来的参数必须是一个字符串
            // props: {
            //     msg: String
            // },
            //  2 组件参数校验:要求父组件传递过来的参数是一个字符串或者数字
            // props: {
            //     msg: [Number, String]
            // },

            // 3 对象
            props: {
                msg: {
                    type: String,
                    required: true,
                    default: 'default value',
                    validator: function (value) {
                        return (value.length > 5)
                    }
                },

            },
            // 4 
            // props: [
            //     'msg'
            // ],
            template: '<div>{{msg}}</div>'
        })
        var vm = new Vue({
            el: "#app"
        })
    </script>
</body>

</html>